<template>
  <div id="app">
    <!-- 搜索框 -->
    <div class="top">
      <van-search placeholder="搜索商品，发现更多优选"  background="#fdde4a" shape="round" @click='handelclick8()'/>
    </div>

    <!-- 分类 -->
    <div class="bottom">
         <router-link  tag="div" class="bottom-day" to="/" :class="this.$route.path==='/homepage/today'?'tabbarcurrent':''">
            <span class="span111">今日推荐</span>
        </router-link>
        <swiper1 class="swiper-container" id="tarbar-swiper" :itlingdata="{
           slidesPerView: 4,
      width: 300,
      slideToClickedSlide: true
        }" itlingclass='www'>
            

              <router-link  tag="div" :to="`/tab/${item.id}`" class="swiper-slide" v-for="item in tabslist" :key="item.id" activeClass="tabbarcurrent">
                {{item.name}}
              </router-link>
           
        </swiper1>
        <van-icon name="bars" class="icon" size="35" @click="isshow=true"/>
    </div>

      <!-- 全部分类 -->
     <div class="list" v-show="isshow">
       <div class="list-div">
          <p>
          全部分类
          </p>
          <van-icon name="cross" class="p-icon" size="25" @click="isshow=false"/>
       </div>
      <ul>
        <router-link  tag="li" :to="{path:'/tab/'+item.id }"  v-for="item in datalist" :key="item.id"  @click.native="isshow=false">
              <img :src="item.imageUrl" alt="">
              <span>{{item.name}}</span>
        </router-link>
      </ul>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import { Search, Icon } from 'vant'
import swiper1 from '@/components/Swiper1'
// import 'swiper/css/swiper.min.css'
import axios from 'axios'
Vue.use(Icon)
Vue.use(Search)
export default {
  props: ['data1'],
  components:{
    swiper1
  },
  data () {
    return {
      datalist: [],
      isshow: false
    }
  },
  async mounted () {
    await axios.get('http://www.xiongmaoyouxuan.com/api/tabs?sa=').then(res => {
      this.datalist = res.data.data.list
    })
 
  },
  computed: {
    tabslist () {
      var arr = [...this.datalist]
      return arr.splice(1)
    }
  },
  methods: {
    myclick () {
      console.log(123)
    },
    handelclick8(){
      this.$router.push('/search')
    }
  }
}
</script>
<style lang="scss" scoped>
.tabbarcurrent{
  border-bottom:5px solid black;
}
#app{
  position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    top: 0;
    background-color: #fdde4a;
    height: 92.48px;
    touch-action: none;

    .bottom{
      display: flex;
      height: 40px;
      line-height: 30px;
      #tarbar-swiper{
        height: 40px;
        text-align: center;
        align-items: center;
        .swiper-slide{
          height: 38px;
        }
      }
      .bottom-day{
        text-align: center;
        height: 35px;
        margin: 0 5px;
        line-height: 30px;
        padding: 0 5px;
         width: 280px;
        span{
          border-right:2px solid;
         width:70px;
         display: block;
        }
      }
      .icon{
        height: 40px;
      }
    }
    .list{
      width: 100%;
      background: #fdde4a;
      position: absolute;
      top:50px;
      text-align: center;
      z-index: 100;
      .list-div{
        line-height: 10px;
         height: 40px;
         border: 1px solid white;
         .p-icon{
          position: absolute;
          top: 10px;
          right: 15px;
         }
      }
      ul{
        background: white;
        display: flex;
        flex-wrap: wrap;
        li{
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom:15px;
          height: 72px;
          img{
            height: 52px;
            width: 52px;
          }
        }
      }

    }

}
.span111{
  z-index: 9999
}
</style>
